<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>INFINI | 映纷创意</title>
	    <link rel="stylesheet" href="css/main.css">
	</head>
	
	<body>
		<header>
		    <img src="http://www.infinistudio.cn/Public/home/images/title2.png" alt="" class="logo">
			    <div class="bar">
				  <nav>
					<a href="" >HOME</a>
					<a href="" >WORK</a>
					<a href="" >CONTACT</a>
					<a href="" >JOIN US</a>
				  </nav>
			    </div>
		</header>
		
		
		
		<div id="banner">
			<div class="pic">
				<ul>
					<li style="display:block;"><a href=""><img src="img/1.png" style="width:100%;"/></a></li>
					<li><a href=""><img src="img/2.png" style="width:100%;"/></a></li>
					<li><a href=""><img src="img/3.png" style="width:100%;"/></a></li>
					<li><a href=""><img src="img/4.png" style="width:100%;"/></a></li>

				</ul>
			</div>

			<div class="tab">
				<ul>
					<li class="on"></li><li></li><li></li><li></li>
				</ul>
			</div>

			<div class="btn">
				<div id="leftBtn">&lt;</div>
				<div id="rightBtn">&gt;</div>
			</div>
		</div>

	    
	    <div class="center">
	    	<div class="main">

	           <p>
			      INFINI （映纷创意）是一家独立创新营销公司，致力于创造会流动的美好创意。我们从策略与洞察出发，不断探索营销和创意的多元表达，用创作精神为品牌提供更具生命力的跨媒体整合营销服务。
		       </p>
		
		       <div class="support">
			     <span><img src="http://www.infinistudio.cn/Public/home/images/1.jpg" alt=""></span>
			     <span><img src="http://www.infinistudio.cn/Public/home/images/2.jpg" alt=""></span>
			     <span><img src="http://www.infinistudio.cn/Public/home/images/14.jpg" alt=""></span>
			     <span><img src="http://www.infinistudio.cn/Public/home/images/3.jpg" alt=""></span>
			     <span><img src="http://www.infinistudio.cn/Public/home/images/4.jpg" alt=""></span>
			     <span><img src="http://www.infinistudio.cn/Public/home/images/5.jpg" alt=""></span>
			     <span><img src="http://www.infinistudio.cn/Public/home/images/6.jpg" alt=""></span>
			     <span><img src="http://www.infinistudio.cn/Public/home/images/7.jpg" alt=""></span>
			     <span><img src="http://www.infinistudio.cn/Public/home/images/12.jpg" alt=""></span>
			     <span><img src="http://www.infinistudio.cn/Public/home/images/13.jpg" alt=""></span>
			     <span><img src="http://www.infinistudio.cn/Public/home/images/8.jpg" alt=""></span>
			     <span><img src="http://www.infinistudio.cn/Public/home/images/9.jpg" alt=""></span>
			     <span><img src="http://www.infinistudio.cn/Public/home/images/10.jpg" alt=""></span>
			     <span><img src="http://www.infinistudio.cn/Public/home/images/11.jpg" alt=""></span>
		       </div>
	        </div>
	    
	    
	        <div class="main_picture">
	    	    <a  href="" class="picture">	
					<img  src="http://www.infinistudio.cn/Public/Upload/2019-01-16/5c3ed5adc5c1c.jpg" alt="">
				    <p>抖音海外版Tik Tok</p>
	    	    </a> 
	    	    <a  href="" class="picture picture2">	
					<img  src="http://www.infinistudio.cn/Public/Upload/2019-01-16/5c3ec9c702adb.jpg" alt="">
				    <p>今日头条年度盛典</p>
	    	    </a> 
	    	    <a  href="" class="picture">	
					<img  src="http://www.infinistudio.cn/Public/Upload/2019-01-16/5c3ec88634813.jpg" alt="">
				    <p>宝洁逆转沙漏</p>
	    	    </a> 
	    	    <a  href="" class="picture">	
					<img  src="http://www.infinistudio.cn/Public/Upload/2018-12-24/5c208811a153c.jpg" alt="">
				    <p>中国抖有味</p>
	    	    </a> 
	    	    <a  href="" class="picture picture2">	
					<img  src="http://www.infinistudio.cn/Public/Upload/2018-12-24/5c20837a904a3.jpg" alt="">
				    <p>火影忍者</p>
	    	    </a> 
	    	    <a  href="" class="picture">	
					<img  src="http://www.infinistudio.cn/Public/Upload/2018-11-05/5be010b1c9c07.jpg" alt="">
				    <p>腾讯WE大会</p>
	    	    </a> 
	    	    
			       
	    	   
	        </div>
	    </div>

    <script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
		<script type="text/javascript">
		$(function(){
			
			var $tabLi = $('#banner .tab li');
			var $picLi = $('#banner .pic li');
			var $btn = $('#banner .btn');
			var $btnDiv = $('#banner .btn div');
			var $banner = $('#banner');
			var index = 0;
			var timer;

			$tabLi.hover(function(){
				index = $(this).index();
				fn();
			});

			$banner.hover(function(){
				$btn.show();
				clearInterval(timer);
			},function(){
				$btn.hide();
				auto();
			});

			$btnDiv.click(function(){
				var i = $(this).index();
				if ( i )
				{
					index ++;
					index %= $tabLi.length;
				}
				else
				{
					index --;
					if(index<0)index = $tabLi.length-1;
				}
				fn();
			}).mousedown(function(){
				return false;
			});
			
			auto();
			function auto(){
				timer = setInterval(function(){
					index ++;
					index %= $tabLi.length;
					fn();
				},5000);
			}
			function fn(){
				$tabLi.eq(index).addClass('on').siblings().removeClass('on');
				$picLi.eq(index).stop(true).fadeIn().siblings().stop(true).fadeOut();
			}
		});
		</script>

	   <footer>
	   	     <div class="left">
	   	     	<div class="i">
	   	     	 <a href="" class="i1"><img src="http://www.infinistudio.cn/Public/home/images/contact1.jpg" alt=""></a>
	   	     	 <a href="" class="i1"><img src="http://www.infinistudio.cn/Public/home/images/contact2.jpg" alt=""></a>
	   	     	 <a href="" class="i1"><img src="http://www.infinistudio.cn/Public/home/images/contact3.jpg" alt=""></a>
	   	     	</div>
	   	     </div>
	   	     <div class="right">
	   	        <div class="text">
	   	        	<div class="text_logo"><img src="http://www.infinistudio.cn/Public/home/images/footer_logo.jpg" alt=""></div>
	   	        <p>INFINI | 映纷创意</p>
	   	        <p>北京市朝阳区常营</p>
	   	        <p>TEL : 010-85394331</p>
	   	        <p>QQ : 7585917</p>
	   	        <p>Email : infinistudio@foxmail.com</p>
	   	        <p>weibo : @InfiniStudio</p>
	   	        </div>
	   	     </div>
	   </footer>
	</body>
</html>
